<script>
import axios from "axios";

export default {
  data() {
    return {
      obj: {},
      data: [],
      row: {},
      isShow: false,
      option: {
        editBtn: false,
        title: '走马灯列表',
        page: false,
        align: 'center',
        menuAlign: 'center',
        column: [
          {
            label: '音乐名称',
            prop: 'name',
            type:'select',
            dicUrl: "/api/musics/musicListDic",
          },
          {
            label: '图片',
            prop: 'imgUrl',
            type: "upload",
            dataType: 'object',
            props:{
              label:'name',
              value:'url'
            },
            propsHttp: {
              res: 'data'
            },
            action: '/api/musics/addFile',
          },
        ]
      }
    }
  },
  /*https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx9273455549562cc4&secret=33205d5793204e43c017696587525919*/
  mounted() {
    this.getList();
  }
  ,
  methods: {
    getList() {
      axios.get('/api/musics/swiperList').then(res => {
        this.data = res.data.data;
      })
    }
    ,

    handleDetail(path) {
      this.$confirm('是否查看？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.open(path);
      });
    }
    ,
    // 增加按钮
    handleRowSave(row, done, loading) {
      row.imgUrl = row.imgUrl[0].name;
      console.log(row)
      axios.post('/api/swiper/addSwiper', row).then(res => {
        if (res.status == 200){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }
        //刷新页面
        this.getList();
      });
      done();  // 关闭表单
      loading(); // 按钮停止加载
    
    }
    ,
    // 删除按钮
    rowDel(row) {
      this.$confirm('是否删除该条信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('/api/swiper/deleteSwiper', {
          params: {
            id: row.id
          }
        }).then(res => {
          if (res.status == 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }
          //刷新页面
          this.getList();
        });
      });
    }
    ,
  }
  ,
}
</script>

<template>
  <div>
    <avue-crud :data="data" :option="option" v-model="obj"
               @row-del="rowDel" @row-save="handleRowSave"
    >
      <template slot-scope="scope" slot="imgUrl">
        <div>
          <el-link @click.stop="handleDetail(scope.row.imgUrl)">{{ scope.row.imgUrl }}</el-link>
        </div>
      </template>
    </avue-crud>
  </div>
</template>

<style scoped>

</style>